<template>
  <transition name="progress-fade">
    <div class="rssi-progress-panel" v-if="show">
      <div class="rssi-progress-header">
        <div class="rssi-title">
          <div class="rssi-icon"></div>
          <span>{{ title }}</span>
        </div>
        <el-button class="rssi-close-btn" @click="handleClose" circle type="danger" size="small"
          :icon="Close"></el-button>
      </div>
      <div class="rssi-progress-body">
        <div class="rssi-progress-text">
          <span>{{ progressText }}</span>
          <span class="progress-percent">{{ progress }}%</span>
        </div>
        <el-progress :percentage="progress" :stroke-width="10" :show-text="false"
          class="rssi-progress-bar" :color="progressBarColor"></el-progress>
        <div class="rssi-progress-info">
          <span v-if="progress < 100">{{ waitingText }}</span>
          <span v-else>{{ completeText }}</span>
        </div>
      </div>
    </div>
  </transition>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'Mprogress',
})
</script>
<script setup  lang="ts">
import { computed } from 'vue'
import { Close } from '@element-plus/icons-vue'
// 定义组件props
const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  progress: {
    type: Number,
    default: 0
  },
  title: {
    type: String,
    default: '下载进度'
  },
  progressText: {
    type: String,
    default: '正在下载文件'
  },
  waitingText: {
    type: String,
    default: '请耐心等待，下载完成后将自动保存...'
  },
  completeText: {
    type: String,
    default: '下载完成，即将保存文件...'
  },
  // 可以增加自定义颜色配置
  primaryColor: {
    type: String,
    default: '#00d1ed'
  }
})
// 定义事件
const emit = defineEmits(['close'])
// 处理关闭事件
const handleClose = () => {
  emit('close')
}
// 进度条颜色配置
const progressBarColor = computed(() => {
  // 根据进度返回不同颜色
  const progress = props.progress;
  if (progress < 30) return '#409EFF';
  if (progress < 60) return '#67C23A';
  if (progress < 90) return '#E6A23C';
  return props.primaryColor; // 完成时使用主题色
});
</script>

<style lang="scss" scoped>
@import '@/styles/progress.scss';
// 进度通知面板样式
.rssi-progress-panel {
  position: fixed;
  top: 80px; /* 调整位置 */
  left: 0;
  right: 0;
  margin: 0 auto; /* 水平居中 */
  width: 450px;
  max-width: 90%;
  background: rgba(0, 14, 36, 0.95);
  backdrop-filter: blur(12px);
  border-radius: 8px;
  box-shadow: 0 0 25px rgba(0, 209, 237, 0.3), 0 0 10px rgba(0, 0, 0, 0.5);
  z-index: 9999;
  border: 1px solid rgba(0, 209, 237, 0.4);
  padding: 0;
  overflow: hidden;
  
  // 科技风格边缘闪光效果
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, 
      transparent 0%, 
      rgba(0, 209, 237, 0.3) 20%, 
      rgba(0, 209, 237, 0.8) 50%,
      rgba(0, 209, 237, 0.3) 80%,
      transparent 100%);
    animation: border-flow 3s linear infinite;
  }
  
  .rssi-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(0, 209, 237, 0.2);
    background: linear-gradient(90deg, 
      rgba(0, 34, 68, 0.5) 0%, 
      rgba(0, 51, 102, 0.7) 100%);
    
    .rssi-title {
      display: flex;
      align-items: center;
      
      .rssi-icon {
        width: 20px;
        height: 20px;
        background-size: contain;
        margin-right: 10px;
        opacity: 0.9;
      }
      
      span {
        color: #ffffff;
        font-size: 16px;
        font-weight: 500;
        letter-spacing: 1px;
        text-shadow: 0 0 10px rgba(0, 209, 237, 0.7);
      }
    }
    
    .rssi-close-btn {
      font-size: 12px;
      transition: all 0.3s;
      color: #fff;
      border: 1px solid rgba(255, 255, 255, 0.2);
      background: rgba(220, 53, 69, 0.7);
      
      &:hover {
        transform: scale(1.1);
        background: #dc3545;
      }
    }
  }
  
  .rssi-progress-body {
    padding: 16px;
    
    .rssi-progress-text {
      display: flex;
      justify-content: space-between;
      margin-bottom: 12px;
      
      span {
        color: #00d1ed;
        font-size: 15px;
        font-weight: 500;
      }
      
      .progress-percent {
        color: #00d1ed;
        font-size: 16px;
        font-weight: bold;
        font-family: monospace;
      }
    }
    
    .rssi-progress-bar {
      margin-bottom: 12px;
      
      // 自定义进度条样式
      :deep(.el-progress-bar__outer) {
        background-color: rgba(0, 40, 80, 0.5) !important;
        border-radius: 4px;
      }
      
      :deep(.el-progress-bar__inner) {
        border-radius: 4px;
        transition: width 0.3s ease;
      }
    }
    
    .rssi-progress-info {
      font-size: 13px;
      color: rgba(255, 255, 255, 0.7);
      text-align: center;
      padding: 4px 0;
      font-style: italic;
    }
  }
}

// 进入/离开动画
.progress-fade-enter-active,
.progress-fade-leave-active {
  transition: opacity 0.4s, transform 0.4s;
}

.progress-fade-enter-from,
.progress-fade-leave-to {
  opacity: 0;
  transform: translateY(-20px);
}

@keyframes border-flow {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 100% 0%;
  }
}
</style>
